<template>
  <div class="app-container">
    <div class="head-container">
      <!-- <eHeader :dict="dict" :permission="permission" /> -->
      <crudOperation :permission="permission" />
    </div>
    <div class="container-water-fall">
      <!-- <h1 style="position: fixed;left: 0;top: 100px;font-style: 15px;color:blue;z-index: 1000;">{{loadstatus}}</h1> -->
      <div class="btn-group" hidden>
        <button @click="loadMore">LoadMore</button>
        <button @click="switchCol(5)">5column(列)</button>
        <button @click="switchCol(8)">8column(列)</button>
        <button @click="switchCol(10)">10column(列)</button>
        <button @click="reset">reset(重置)</button>
        <a
          style="color: red"
          href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md"
          target="_blank"
        >GITHUB</a>
        <b style="color: blue">滚动至底部可触发loadmore</b>
      </div>
      <waterfall
        :col="col"
        :data="data"
        :width="itemWidth"
        :gutter-width="gutterWidth"
        @loadmore="loadMore"
        @scroll="scroll"
      >
        <template>
          <div v-for="(item, index) in data" :key="index" class="cell-item">
            <img v-if="item.img" :src="item.img" alt="加载错误">
            <div class="item-body">
              <div class="item-desc">{{ item.title }}</div>
              <div class="item-footer">
                <div v-if="item.avatar" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }" />
                <div class="name">{{ item.user }}</div>
                <div class="like" :class="item.liked ? 'active' : ''">
                  <i />
                  <div class="like-total">{{ item.like }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </waterfall>
      <loading :show="loading" />
    </div>
    <!--分页组件-->
    <pagination />
    <!--表单渲染-->
  </div>
</template>

<script>
/*
  注意:
  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度
  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/
import loading from './loading'
import crudDqDoctors from '@/api/dqhrm/doctor'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, realName: null, nickName: null, avatar_path: null, avatar_name: null, wxName: null, wxNo: null, wxOpenid: null, phoneNumber: null, idCardNumber: null, dqHrmPassword: null, birthDate: null, gender: null, ethnicity: null, idCardProvince: null, idCardAddress: null, email: null, physicianTitle: null, registeredDepartment: null, titleRegistrationScope: null, titleCertificateNumber: null, practiceCertificateObtainedDate: null, originalRegistrationProvince: null, originalRegistrationCity: null, originalRegistrationUnitName: null, originalRegistrationUnitLevel: null, hospitalNature: null, qualificationCertificateNumber: null, qualificationObtainedDate: null, specialtyCategory: null, graduationSchool: null, educationLevel: null, physicianLicenseNumber: null, pharmacistSpecialtyCategory: null, pharmacistQualificationCertificateNumber: null, pharmacistManagementNumber: null, pharmacistRegistrationCertificateNumber: null, pharmacistIssuingUnit: null, pharmacistPracticeCategory: null, pharmacistPracticeScope: null, pharmacistRegistrationAddress: null, personalProfile: null, specialtiesAndDiseases: null, otherMedicalCertificates: null, bankName: null, bankAccountNumber: null, totalRevenue: null, grade: null, isEnable: null, auditStatus: null, auditResult: null, auditTime: null, registrationTime: null, createTime: null, createBy: null, updateTime: null, updateBy: null, lastLonginTime: null }
export default {
  name: 'DqDoctors',
  components: { loading, pagination, crudOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['gender'],
  cruds() {
    return CRUD({
      title: '医生信息', url: 'api/dqDoctors', idField: 'id', sort: 'id,desc', crudMethod: { ...crudDqDoctors },
      optShow: { add: true, edit: true, del: true, download: true, import: true, search: false, refresh: true, selector: false, reset: false }
    })
  },
  props: {
    title: String
  },
  data() {
    return {
      permission: {
        add: ['admin', 'dqDoctors:add'],
        edit: ['admin', 'dqDoctors:edit'],
        del: ['admin', 'dqDoctors:del'],
        download: ['admin', 'dqDoctors:download'],
        import: ['admin', 'dqDoctors:import']
      },
      data: [],
      col: 5,
      loading: false,
      gitHubData: {},
      originData: [
        {
          img:
            // 'https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080',
            // '../../assets/images/doctor_img_f.png',
            this.getDefImgSrc('doctor_img_f.png'),
          avatar:
            // 'https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg',
            // '~@/assets/images/doctor_avatar_f.png',
            this.getDefAvatarSrc('doctor_avatar_f.png'),
          title: '最近浴室新宠，日系神仙好物了解一下～',
          user: 'www',
          like: '953'
        },
        {
          img:
            'https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080',
          avatar:
            'https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg',
          title: '150元搞定全套护肤品，这些护肤好物必须交出来！',
          user: '迷人的小妖精迷人的小妖精',
          like: '952'
        },
        {
          img:
            'https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080',
          avatar:
            'https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg',
          title: '最近浴室新宠，日系神仙好物了解一下～',
          user: '迷人的小妖精迷人的小妖精',
          like: '953'
        },
        {
          img:
            'https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080',
          avatar:
            'https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg',
          title: '150元搞定全套护肤品，这些护肤好物必须交出来！',
          user: '迷人的小妖精迷人的小妖精',
          like: '953'
        },
        {
          img:
            'https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080',
          avatar:
            'https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg',
          title: '最近浴室新宠，日系神仙好物了解一下～',
          user: '迷人的小妖精迷人的小妖精',
          like: '953'
        }
      ]
    }
  },
  computed: {
    itemWidth() {
      // return 133 * 0.5 * (document.documentElement.clientWidth / 375)
      return 133 * 0.5 * (document.querySelectorAll('appcontainer').clientWidth / 375)
    },
    gutterWidth() {
      // return 10 * 0.5 * (document.documentElement.clientWidth / 375)
      return 10 * 0.6 * (document.querySelectorAll('appcontainer').clientWidth / 375)
    }
  },
  mounted() {
    this.data = this.originData
  },
  methods: {
    getDefImgSrc(name) {
      return require(`@/assets/images/${name}`)
    },
    getDefAvatarSrc(name) {
      return require(`@/assets/images/${name}`)
    },
    toGitHub() {
      window.open(
        'https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md',
        '_blank'
      )
    },
    reset() {
      this.data = []
    },
    scroll(scrollData) {
      console.log(scrollData)
    },
    switchCol(col) {
      this.col = col
    },

    loadMore() {
      this.loading = true
      setTimeout(() => {
        this.data = this.data.concat(this.originData, this.originData)
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
}

.container-water-fall {
  // padding: 0 28px;
  // width: 100vw;
  // width: 100vw;
  // height: 100vw;
  box-sizing: border-box;
  // overflow: auto;

  h4 {
    padding-top: 56px;
    padding-bottom: 28px;
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #000000;
    letter-spacing: 1px;
    text-align: justify;
  }

  button {
    background-color: #ff0;
    color: #24292e;
    border: 1px solid rgba(27, 31, 35, 0.2);
    border-radius: 0.25em;
    width: 100px;
    line-height: 26px;
    font-size: 13px;
    margin: 4px 0;
    margin-right: 4px;
    cursor: pointer;
    outline: none;

    &.blue-light {
      background: #27fbc2;
    }
  }

  button:hover {
    background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
  }

  .cell-item {
    width: 95%;
    // margin-bottom: 18px;
    background: #ffffff;
    border: 2px solid #F0F0F0;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10px;

    img {
      // border-radius: 12px 12px 0 0;
      width: 100%;
      height: auto;
      display: block;
    }

    .item-body {
      // border: 1px solid #F0F0F0;
      padding: 12px;

      .item-desc {
        font-size: 15px;
        color: #333333;
        line-height: 15px;
        font-weight: bold;
      }

      .item-footer {
        margin-top: 22px;
        position: relative;
        display: flex;
        align-items: center;

        .avatar {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background-repeat: no-repeat;
          background-size: contain;
        }

        .name {
          max-width: 150px;
          margin-left: 10px;
          font-size: 14px;
          color: #999999;
        }

        .like {
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;

          &.active {
            i {}

            .like-total {
              color: #FF4479;
            }
          }

          i {
            width: 28px;
            display: block;
          }

          .like-total {
            margin-left: 10px;
            font-size: 12px;
            color: #999999;
          }
        }
      }
    }
  }
}

.githubdata {
  float: right;
  margin-right: 90px;

  img {
    width: 14px;
    // height: 16px;
  }
}
</style>
